<template>
	<view>
		<view class='searchGood'>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品'
						placeholder-class='placeholder' @input="setValue"></input>
					<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" @click="cleanKeyWord"
						src="@/static/com/icon_close.png" mode=""></image>
				</view>
				<view class='bnt' @tap='searchBut'>搜索</view>
			</view>
			<view class="index-coupon">
				<scroll-view scroll-x="true" class="index-coupon-view">
					<view class="index-coupon-msg" v-for="(item,index ) in classList" :key="index">
						<view class="index-coupon-msg-msg" :class="tagIndex==index?'tagActive':''"
							@click="manuBtn(1,index,item)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<template v-if="bastList.length==0">

				<view class='title dis'>
					<view>历史搜索</view>
					<view>
						<image @click="serchDel" src="@/static/com/icon_sc.png" mode=""></image>

					</view>
				</view>

				<view class='list acea-row' v-if="historySearchList.length!=0">
					<block v-for="(item,index) in historySearchList" :key="index">
						<view class='item' @tap='setHotSearchValue(item.name)'>{{item.name}}</view>
					</block>
				</view>
				<view class="noData" v-else>
					暂无搜索记录
				</view>
				<view class='title'>搜索推荐</view>
				<view class='list acea-row'>
					<block v-for="(item,index) in hotSearchList" :key="index">
						<view class='item' @tap='setHotSearchValue(item.title)'>{{item.title}}</view>
					</block>
				</view>

			</template>


			<view class="" style="padding: 0 40rpx;" v-if="bastList.length > 0">

				<view class="tab dis">
					<view class="tab-msg" :class="tabIndex==index?'tabActive':''" v-for="(item,index) in manuList"
						@click="manuBtn(2,index,item)">
						<view class="tab-msg1">

							<text v-if="item.tit!='价格'">{{item.tit}}</text>
						</view>
						<view class="tab-msg2">
							<picker v-if="item.tit=='价格'" @change="bindPickerChange" :value="priceIndex" :range="array">
								{{array[priceIndex]||'价格'}}
							</picker>
							<image v-if="item.tit=='价格'" src="@/static/com/icon_zk.png" mode=""></image>
						</view>


					</view>
					<view class="dis">


					</view>
				</view>

				<goodList :bastList="bastList" type="1"></goodList>
			</view>

			<view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		<view class='noCommodity'>
			<view class='pictrue' style="text-align: center;" v-if="bastList.length == 0 && isbastList">
				<image src="https://gfry.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/content/2024/03/07/icon_nodata.png" mode=""></image>
				暂无内容

			</view>
			<!-- <recommend :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend> -->
		</view>
		<uni-popup ref="pricePopup" type="bottom">
			<!-- <view class="pricePopup-wrap">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	import {
		getSearchKeyword,
		getProductslist,
		getSearchHistory,
		getSerchClass,
		getSerchDel
	} from '@/api/store.js';

	import goodList from '@//pages/index/components/fosterList.vue';
	import recommend from '@/components/recommend';
	export default {
		components: {
			goodList,
			recommend
		},
		data() {
			return {
				classList: [],
				historySearchList: [],
				array: ['由高到低', '由低到高'],
				priceIndex: "",
				manuList: [{
						tit: '销量'
					},
					{
						tit: '人气'
					},
					{
						tit: '价格'
					}
				],
				tabIndex: 0,
				tagIndex: 0,
				hostProduct: [],
				searchValue: '',
				focus: true,
				bastList: [],
				hotSearchList: [],
				first: 0,
				limit: 8,
				page: 1,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				hotPage: 1,
				isScroll: true,
				isbastList: false,
				category: '',
				cid: 0,
			};
		},
		onShow: function() {
			this.getRoutineHotSearch();

			this.getclassList()
		},
		onReachBottom: function() {
			if (this.bastList.length > 0) {
				this.getProductList();
			}

		},
		methods: {
			serchDel() {
				getSerchDel().then(res => {
					this.getRoutineHotSearch()
				})
			},
			getclassList() {

				getSerchClass().then(res => {
					this.classList = res.data

					this.cid = this.classList[0].id
				});

			},
			cleanKeyWord() {
				this.searchValue = ''
				this.getProductList()
				this.bastList = []
			},
			bindPickerChange(e) {

				this.priceIndex = e.detail.value

				if (this.priceIndex == 1) {
					this.category = "priceOrderUp"
				} else if (this.priceIndex == 0) {
					this.category = "priceOrderDown"
				}
				this.getProductList()

			},
			manuBtn(type, index, item) {
				if (type == 1) {
					this.bastList = []
					this.tagIndex = index
					this.cid = item.id
					this.page = 1
					this.getProductList()
					this.getRoutineHotSearch()

				} else {
					this.tabIndex = index

					if (this.tabIndex != 2) {
						this.priceIndex = ''
					}
					this.getProductList()
				}

			},
			getRoutineHotSearch: function() {
				let that = this;
				getSearchKeyword().then(res => {
					that.$set(that, 'hotSearchList', res.data);

				});
				getSearchHistory().then(res => {
					that.$set(that, 'historySearchList', res.data);
				})
			},

			getProductList: function() {
				let salesOrder = ''
				let popularityorder = ''
				let priceOrder = ''
				if (this.tabIndex == 0) {
					salesOrder = 'DES'
				} else if (this.tabIndex == 1) {
					popularityorder = 'DES'
				} else if (this.tabIndex == 2) {
					if (this.priceIndex == 1) {
						priceOrder = "ASC"
					} else {
						priceOrder = "DES"
					}

				}

				let that = this;
				// if (that.loadend s) return;
				// if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				getProductslist({
					priceOrder: priceOrder,
					popularityorder: popularityorder,
					salesOrder: salesOrder,
					keyword: that.searchValue,
					page: that.page,
					limit: that.limit,
					cid: this.cid
				}).then(res => {

					let list = res.data.list,
						loadend = list.length < that.limit;
					// let

					that.bastList = that.$util.SplitArray(list, that.bastList);

					that.$set(that, 'bastList', that.bastList);
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
					that.page = that.page + 1;
					that.isbastList = true;
				}).catch(err => {
					that.loading = false,
						that.loadTitle = '加载更多'
				});
			},

			setHotSearchValue: function(event) {
				this.$set(this, 'searchValue', event);
				this.page = 1;
				this.loadend = false;
				this.$set(this, 'bastList', []);
				this.getProductList();
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchBut: function() {
				let that = this;
				that.focus = false;
				if (that.searchValue.length > 0) {
					that.page = 1;
					that.loadend = false;
					that.$set(that, 'bastList', []);
					uni.showLoading({
						title: '正在搜索中'
					});
					that.getProductList();
					uni.hideLoading();
				} else {
					return this.$util.Tips({
						title: '请输入要搜索的商品',
						icon: 'none',
						duration: 1000,
						mask: true,
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.noData {
		padding-left: 40rpx;
	}

	.tabActive {
		border-bottom: 4rpx solid $maincolor;
	}

	.pricePopup-wrap {
		width: 100%;
		height: 200rpx;
		background: #fff;
	}

	.tab {
		width: 100%;
		height: 88rpx;
		justify-content: space-between;
		padding: 0 40rpx;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;

		}

		.tab-msg {
			.tab-msg1 {


				text-align: center;
			}

			.tab-msg2 {
				display: flex;
				align-items: center;
			}

			height: 100%;
			line-height: 88rpx;
			display: flex;
			align-items: center;
			position: relative;

			.line {
				position: absolute;
				bottom: 8rpx;
				left: -10rpx;
				height: 6rpx;
				width: 28rpx;
				background: $maincolor;
			}
		}
	}

	.tagActive {
		background: $maincolor !important;
		color: #fff !important;
	}

	.index-coupon {
		margin: 20rpx;

		.index-coupon-view {
			white-space: nowrap;
			// width: 680rpx;
			margin: 0 auto;
			// height: 100rpx;
		}

		width: 100%;

		.index-coupon-msg {
			.index-coupon-msg-msg {
				padding: 6rpx 16rpx;
				color: #000;
				background: #fff;
				border-radius: 10rpx;
				border: 1rpx solid #f5f5f5;
			}

			display: inline-block;
			opacity: 1;
			margin-right: 20rpx;



		}
	}

	page {
		background-color: #fff !important;
	}

	.searchGood .search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}

	.searchGood .search {
		padding-top: 20rpx;
	}

	.searchGood .search .input {
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.searchGood .search .input input {
		width: 442rpx;
		font-size: 26rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		margin-right: 6px;
		color: #fff;
		background: $maincolor;
		border-radius: 30px 30px 30px 30px;
		opacity: 1;

	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999;
		margin: 0 30rpx 25rpx 30rpx;
		justify-content: space-between;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		/* height: 60rpx; */
		border-radius: 30rpx;
		/* line-height: 60rpx; */

		margin: 0 0 20rpx 20rpx;
		padding: 8rpx 37rpx;
		background: #F1F1F1;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}
</style>